<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="top-panel">
      <view class="header">
        <u-icon name="arrow-left" size="40" color="#333" @click="goBack" class="back-button"></u-icon>
        <text class="title">医院详情</text>
      </view>
    </view>

    <!-- 医院信息 -->
    <view class="hospital-info">
      <view class="hospital-type-circle" :style="{ backgroundColor: '#6cf' }">
        <text class="hospital-type-text">{{ hospitalDetail.data.hospitalType }}</text>
      </view>
      <view class="hospital-details">
        <text class="hospital-name">{{ hospitalDetail.data.name || '未知医院' }}</text>
        <br>
        <text class="hospital-level">{{ hospitalDetail.data.hospitalLevel || '未知等级' }}</text>
        <br>
        <text class="hospital-address">{{ hospitalDetail.data.address || '未知地址' }}</text>
      </view>
    </view>
    <br>

    <!-- 体检套餐列表 -->
    <view class="package-list">
      <view class="item" v-for="(item, index) in packageData.data" :key="index">
        <image :src="item.logo ? '/static/' + item.logo : '/static/placeholder.png'" class="item-image"/>
        <view class="item-info">
          <text class="item-title">{{ item.packageName }}</text>
          <br>
          <text class="item-category">{{ item.category || '无分类' }}</text>
          <br>
          <text class="item-price">¥{{ item.price }}</text>
        </view>
        <view class="buy-button" @click="navigateToPurchase(item.id)">
          <text>去购买</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hospitalDetail: {}, // 存储医院详情
      packageData: {}, // 存储体检套餐数据
      hospitalId: null // 从页面参数获取 hospitalId
    };
  },
  onLoad(options) {
    // 从页面参数获取 hospitalId
    this.hospitalId = options.hospitalId;
    // 加载医院详情和套餐数据
    this.getHospitalDetail();
    this.getPackages();
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    // 根据hospitalId获取医院详情
    getHospitalDetail() {
      uni.request({
        url: `http://localhost:8080/app/hospital/detail/${this.hospitalId}`, // 假设的详情接口
        method: 'GET',
        success: (res) => {
          if (res.data && res.data.data) {
            this.hospitalDetail = res.data; // 直接赋值整个响应对象
          } else {
            console.error('医院详情数据格式错误', res.data);
            this.hospitalDetail = {};
          }
        },
        fail: (err) => {
          console.error('请求医院详情失败', err);
          this.hospitalDetail = {};
        }
      });
    },
    getPackages() {
      uni.request({
        url: `http://localhost:8080/app/package/byHospital?hospitalId=${this.hospitalId}`, // 假设的套餐接口
        method: 'GET',
        // 移除 data 和 header，因为 GET 请求无需请求体
        success: (res) => {
          console.log('套餐数据:', res.data);
          if (res.data && res.data.data) {
            this.packageData = res.data; // 直接赋值整个响应对象
          } else {
            console.error('套餐数据格式错误', res.data);
            this.packageData = {};
          }
        },
        fail: (err) => {
          console.error('请求套餐失败', err);
          this.packageData = {};
        }
      });
    },
    navigateToPurchase(packageId) {
      console.log('跳转到购买，packageId:', packageId);
      uni.navigateTo({
        url: `/pages/physical/purchase?packageId=${packageId}&hospitalId=${this.hospitalId}`
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
  height: 100vh;
  overflow: hidden;
}

.top-panel {
  background-color: #fff;
  padding: 10rpx 20rpx;
  border-bottom: 1rpx solid #eee;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.back-button {
  position: absolute;
  left: 10rpx;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

.hospital-info {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.hospital-type-circle {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 100rpx;
}

.hospital-type-text {
  color: #fff;
  font-size: 25rpx;
  font-weight: bold;
}

.hospital-details {
  flex: 1;
}

.hospital-name {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.hospital-level {
  font-size: 28rpx;
  color: #666;
  margin-top: 5rpx;
}

.hospital-address {
  font-size: 26rpx;
  color: #666;
  margin-top: 5rpx;
}

.package-list {
  width: 100%;
}

.item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
  position: relative;
}

.item-image {
  width: 100rpx;
  height: 100rpx;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
}

.item-title {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
}

.item-category {
  font-size: 26rpx;
  color: #666;
  margin-top: 5rpx;
}

.item-price {
  font-size: 28rpx;
  color: #FF4444;
  margin-top: 5rpx;
}

.buy-button {
  width: 100rpx;
  height: 40rpx;
  background-color: #007AFF;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
}

.buy-button text {
  color: #fff;
  font-size: 24rpx;
}
</style>